<template>
  <!-- 导航区域 -->
  <div class="menu">
    <div class="menu_1">
      <div class="menu_2">
        <!--导航栏下拉菜单获得焦点显示-->
        <span
          v-for="(value, index) in nav_data"
          :key="nav_data[index].id"
          @mouseover="nav_data[index].isShow = !nav_data[index].isShow"
          @mouseout="nav_data[index].isShow = !nav_data[index].isShow"
          class="relative"
        >
        <!--导航栏显示-->
          <router-link :to="`/${nav_data[index].id}`">{{ nav_data[index].name }}</router-link>
          <ul
            @focus="nav_data[index].isShow = true"
            v-show="nav_data[index].isShow == true" 
          >
            <li
              v-for="(p, index_children) in nav_data_children[index]"
              :key="index_children"
              @mouseover="
                nav_data_children[index][index_children].isShow =
                  !nav_data_children[index][index_children].isShow
              "
              @mouseout="
                nav_data_children[index][index_children].isShow =
                  !nav_data_children[index][index_children].isShow
              "
            >
            <!--一级菜单显示-->
              <router-link :to="`${p.id}`">{{ p.name }}</router-link>
              <ul
                @focus="nav_data_children[index][index_children].isShow = true"
                v-show="nav_data_children[index][index_children].isShow"
              >
                <li
                  v-for="(p_children, index_children_1) in nav_data_children[
                    index
                  ][index_children].children"
                  :key="index_children_1"
                >
                <!--二级菜单显示-->
                  <router-link :to="`${p_children.id}`">{{ p_children.name }}</router-link>
                </li>
              </ul>
            </li>
          </ul>
        </span>
      </div>
      
    </div>
  </div>
</template>

<script>
export default {
  name: "MyNav",
  mounted() {
    var _this = this;
    this.axios.get(`/api/cms-category/all`).then(
      (res) => {
        _this.nav_data = res.data.data;
        console.dir(_this.nav_data);
      },
      (err) => {
        console.log(err);
      }
    ),
      this.axios.get(`/api/cms-category/one/9`).then(
        (res) => {
          _this.nav_data_children[0] = res.data.data.children;
        },
        (err) => {
          console.log(err);
        }
      ),
      this.axios.get(`/api/cms-category/one/10`).then(
        (res) => {
          _this.nav_data_children[1] = res.data.data.children;
        },
        (err) => {
          console.log(err);
        }
      ),
      this.axios.get(`/api/cms-category/one/11`).then(
        (res) => {
          _this.nav_data_children[2] = res.data.data.children;
        },
        (err) => {
          console.log(err);
        }
      ),
      this.axios.get(`/api/cms-category/one/12`).then(
        (res) => {
          _this.nav_data_children[3] = res.data.data.children;
        },
        (err) => {
          console.log(err);
        }
      ),
      this.axios.get(`/api/cms-category/one/13`).then(
        (res) => {
          _this.nav_data_children[4] = res.data.data.children;
        },
        (err) => {
          console.log(err);
        }
      ),
      this.axios.get(`/api/cms-category/one/14`).then(
        (res) => {
          _this.nav_data_children[5] = res.data.data.children;
        },
        (err) => {
          console.log(err);
        }
      ),
      this.axios.get(`/api/cms-category/one/15`).then(
        (res) => {
          _this.nav_data_children[6] = res.data.data.children;
        },
        (err) => {
          console.log(err);
        }
      ),
      this.axios.get(`/api/cms-category/one/16`).then(
        (res) => {
          _this.nav_data_children[7] = res.data.data.children;
        },
        (err) => {
          console.log(err);
        }
      );
    console.log(this.nav_data_children);
    setTimeout(() => {
      console.log(this.nav_data_children);
      console.log(this.nav_data_children[0]);
    }, 800);
  },
  data() {
    return {
      nav_data: [],
      nav_data_children: [],
      index_children: 0,
    };
  },
  methods: {},
};
</script>

<style scoped>
/* menu导航区域 */
.menu {
  width: 1004px;
  margin: 0 auto;
  background: url(../../assets/img/header.png);
  background-repeat: repeat-x;
  border-top: 3px solid #7797d3;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  background-color: #f9fafa;;
}

.menu_1 span {
  width: 12.5%;
  background-color: #006699;
}

.menu_1 span a {
  display: block;
  font-size: 16px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  border-left: 1px solid rgb(68, 36, 209);
}
.menu_1 span li:hover {
  background: #ff8800;
}

.menu_1 span a:hover {
  background: #ff8800;
}

.menu_2 span > ul {
  cursor: pointer;
  position: absolute;
}

.menu_2 span > ul ul {
  position: absolute;
  left: 125px;
  top: -1px;
}

.menu_2 span > ul ul li a{
  width: 126.5px;
  background-color: white;
  position: relative;
  display: flex;
  justify-content: left;
  align-content: center;
  color: black;
  border: solid 1px #dddddd;
  font-size: 15px;
  padding: 7px 0px 7px 15px;
  line-height: 20px;
}

.menu_2 span > ul > li a{
  width: 126.5px;
  background-color: white;
  position: relative;
  display: flex;
  justify-content: left;
  align-content: center;
  color: black;
  border: solid 1px #dddddd;
  font-size: 15px;
  padding: 7px 0px 7px 15px;
  line-height: 20px;
}

.menu_2 {
  display: flex;
  flex-direction: row;
}

.relative {
  position: relative;
  top: 0;
  left: 0;
}
</style>